<%--
  Created by IntelliJ IDEA.
  User: ABC
  Date: 2024/6/1
  Time: 12:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<style>
    tr:nth-child(even) {
        background-color: #d7d7d7;
    }
    th {
        font-size: 20px;
        background-color: #bbbbbb;
    }

    td {
        font-size: 20px;
    }
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租车服务 - 订单</title>
    <link rel="stylesheet" href="/car_rental/u/css/styles.css">
    <link rel="stylesheet" href="/car_rental/u/css/pro.css">
    <%--    <link rel="stylesheet" href="css/orders.css">--%>
    <script src="/car_rental/u/js/jquery-3.7.1.min.js"></script>
    <script src="/car_rental/u/js/rent.js"></script>
</head>

<body>
<header>
    <h1>租车服务</h1>
    <nav>
        <ul>
            <li><a href="../index.jsp">首页</a></li>
            <li><a href="rent.jsp">租车</a></li>
            <li><a href="profile.jsp">个人信息</a></li>
            <li><a href="orders.jsp" class="active">订单</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="orders">
        <h2>订单</h2>
        <table>
            <thead>
            <tr>
                <th>订单编号</th>
                <th>车型</th>
                <th>车名</th>
                <th>租车时间</th>
                <th>租车天数</th>
                <th>金额</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody id="mytbody">

            <!-- 添加更多订单 -->
            </tbody>
        </table>
    </section>
</main>
<footer>
    <p>&copy; 2024 租车服务. 版权所有.</p>
</footer>
</body>
<script>
    //获取用户id
    <%--var userId = <%= session.getAttribute("id") %>;--%>
    var userId = ${user.id};
    console.log('用户id'+userId);
    $(function () {
        showOreders(userId);
    });
    function showOreders(userId) {
        $.get("/car_rental/selectRentalServlet", {'id': userId}, function (data) {
            $.each(data, function () {
                var duration = this.duration;
                var id = this.id;
                var name = this.name;
                var state = this.state;
                var rentalTime = this.rentalTime;
                var totalCost = this.totalCost;
                var type = this.type;
                //判断是否还车
                var meg = '进行中';
                if (state == 1) {
                    meg = '已完成';
                    var tr = '<tr>' +
                        '<td>' + id + '</td>' +
                        '<td>' + type + '</td>' +
                        '<td>' + name + '</td>' +
                        '<td>' + rentalTime + '</td>' +
                        '<td>' + duration + '</td>' +
                        '<td>' + totalCost + '</td>' +
                        '<td>' + meg + '</td>' +
                        '</tr>';
                }else {
                    var tr = '<tr>' +
                        '<td>'+id+'</td>'+
                        '<td>'+type+'</td>'+
                        '<td>'+name+'</td>'+
                        '<td>'+rentalTime+'</td>'+
                        '<td>'+duration+'</td>'+
                        '<td>' + totalCost + '</td>' +
                        '<td style="color: #f80a0a">'+meg+'</td>'+
                    '</tr>'
                }
                $("#mytbody").append(tr);
            })
        });
    };
</script>
</html>
